@import url(./comoon公共样式.css);

/* 需要左右浮动直接定义类名调用即可 ，无需重复书写*/

.fl {
    float: left;
}

.fr {
    float: right;
}

.banner_bg {
    width: 100%;
    height: 500px;
    background-color: #f5f5f5;
    margin-top: 50px;
}

/*  banner部分!  */
.banner {
    position: relative;

    margin-top: 30px;
    height: 500px;
    background-color: bisque;
    background: url(../uploads/banner_1.png)
}

.nav {
    width: 250px;
    height: 100%;
    /* background-color: pink; */
}

.nav ul li {
    display: block;
    height: 50px;
    /* background-color:lightblue; */
    background: rgba(0, 0, 0, 0.3);


}

.nav ul li a {
    position: relative;
    display: block;
    font-size: 14px;
    height: 50px;
    color: aliceblue;
    line-height: 50px;
    text-indent: 3em;

}

.nav ul li a:hover {
    background-color: red;
}

.nav ul li a span {
    position: absolute;
    right: 20px;
}


.title-hd {
    height: 80px;
    /* background-color: aqua; */
}


.hd_gy {
    height: 80px;
    /* background-color: red; */
    margin-top: 5px;
}

.hd_gy h3 {
    margin-top: 30px;
    font-size: 34px;
    color: #ccc;
    font-size: 400;
}

.hd_gy a,
.hd_gy p {
    font-size: 16px;
    margin-left: 34px;
    margin-top: 52px;
    color: #999;
}


.list {
    margin-top: 10px;
    height: 410px;
    /* background-color: red; */
}


.list ul {
    width: 103%;
}

.list ul {
    float: left;
}

.list ul li {
    float: left;
    width: 293px;
    height: 400px;
    margin-left: 5px;
    background-color: #f0f9f4;
}

.list ul li img {
    width: 100%;
}

.list ul li h3 {
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 25px;
    font-size: 18px;
}

.price span {
    /* span是行内元素，需要进行元素转换 */
    display: block;
    height: 10px;
    line-height: 10px;
    text-align: center;
    font-size: 18px;
    color: red;

}


/* recommend  人气推荐 */
.list_2 {
    margin-top: 10px;
    height: 410px;
    /* background-color: red; */
}


.list_2 ul {
    width: 103%;
}

.list_2 ul {
    float: left;
}

.list_2 ul li {
    float: left;
    width: 293px;
    height: 400px;
    margin-left: 5px;
    background-color: #f0f9f4;
}

.list ul li img {
    width: 100%;
}

.list_2 ul li h3 {
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 25px;
    font-size: 18px;
}

.price_2 span {
    /* span是行内元素，需要进行元素转换 */
    display: block;
    height: 10px;
    line-height: 10px;
    text-align: center;
    font-size: 18px;


}

/* recommend  人气推荐 */


.separation {
    width: 100%;
    height: 30px;
    /* background-color: #f0f9f4; */
    box-shadow: 0 3px 3px 3px rgba(0, 0, 0, .3);

}


.fresh {
    height: 610px;
    margin-top: 10px;

    /* background-color: skyblue; */
}


.ad_fl {
    float: left;
    width: 243px;
    height: 610px;
    /* background-color: red; */
}


.ad_fr {

    float: left;
    width: 957px;
    /* background-color:#ccc */

}

.ad_fr ul li {
    position: relative;
    /* 这里子绝父相
        不是给总父亲relative
        而是给li,鼠标经过li即可跳出显示显示框 */
    overflow: hidden;
    /* 需要把多余的内容溢出隐藏起来
        即可查看被隐藏起来的内容
     */
    float: left;
    width: 230px;
    height: 310px;
    border: 1px solid transparent;
    margin: 4px;
    /* background-color: red; */

}

.ad_fr li:hover {
    border-color: #27ba9b;
}

/* 鼠标经过改变边框的颜色 
 记住我们边框一定有一个颜色
*/
.ad_fr ul li img {
    width: 100%;
}

.ad_fr h5 {
    text-align: center;
    font-size: 14px;
}

.ad_fr span {
    display: block;
    text-align: center;
}

.ad_fr p {
    font-size: 16px;
    text-align: center;
    /* color: red; */
}


.ad_fr li .mask {
    position: absolute;
    width: 100%;
    height: 84px;
    left: 0;
    background-color: #27ba9b;
    font-size: 13px;
    color: #f0f9f4;
    padding: 15px 60px 0;
    bottom: -84px;
    /* 这里让下边框先溢出隐藏
    鼠标经过的时候在出现
    */
    transition: all .3s;
    /* transition 过度效果
    让元素类似于动画效果
    */
}

.ad_fr li:hover .mask {
    bottom: 0;
}

.ad_fr li .mask:hover p {
    display: block;
    height: 35px;
    width: 120px;
    border-bottom: 1px solid #fff;
    color: #FFF;
}

/* - fresh  生鲜 end */



/* 
News最新专题 start */
.News {
    width: 100%;
    height: 510px;
    background-color: #f5f5f5;
    margin-top: 40px;
}

.News_hd {
    height: 80px;
    /* background-color: red; */
    margin-top: 5px;
}

.News_hd h3 {
    display: block;
    font-size: 30px;
    height: 40px;
    margin-top: 20px;
    line-height: 40px;
    color: #000;
}


.News_hd .fl {

    margin-left: 20px;
}


.News_hd p,
.News_hd a {
    display: block;
    height: 40px;
    margin-top: 20px;
    line-height: 40px;
    color: #999;

}


.fr {
    font-size: 18px;
}

.News_bd {

    height: 357px;
    /* background-color: aqua; */
    margin-top: 15px;
}

.News_bd ul {
    float: left;
}

.News_bd ul li {
    position: relative;
    /* 子绝父相啊！！！！！！！！！！！！！！
    一定要找到该元素的父亲，才能约束到其中间
    否则无法生效！！！！！
    */
    float: left;
    width: 388px;
    height: 356px;
    margin-left: 10px;
    background-color: #fff;
}


.News_bd li .pic {
    position: relative;
    height: 283px;
}

.News_bd ul li img {
    width: 100%;
}


.News_bd ul li .txt {

    position: absolute;
    top: 213px;
    width: 100%;
    text-indent: 2em;
    /* background-color: #27ba9b; */


}

.News_bd ul li span {
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: 16px;
    background-color: #fff;

}


.News_bd ul li .txt h4 {
    font-size: 20px;
    color: #fff;
}

.News_bd ul li .txt p {
    font-size: 14px;
    color: #ccc;
}


.News_bd ul li .txt span {
    color: red;
}


.txt_item {
    position: absolute;
    width: 100%;
    height: 60px;
    /* background-color: navajowhite */
}

.txt_item span:nth-child(1) {
    position: absolute;
    left: 0;
    width: 50px;
    height: 60px;
    background: url(../images/sprites.png) no-repeat -110px -105px;
}

.txt_item span i:nth-child(1) {
    margin-left: 30px;
}

.txt_item span:nth-child(2) {
    position: absolute;
    left: 70px;
    width: 50px;
    height: 60px;
    background: url(../images/sprites.png) no-repeat -150px -105px;
}

.txt_item span i:nth-child(2) {
    margin-left: 30px;
}

.txt_item span:nth-child(3) {
    position: absolute;
    right: 40px;
    width: 50px;
    height: 60px;
    background: url(../images/sprites.png) no-repeat -190px -105px;
}


/* <!--   News最新专题 start --> */